$mode-light: (
  'background': #f6f8fa,
  'background-light': rgba(225, 225, 225, 0.3),
  'primary-text-on-background': #000,
  'surface': #fff,
  'primary-text-on-surface': $dark-primary,
  'primary-text-on-surface-rgb': to_rgb($dark-primary),
  'secondary-text-on-surface': $dark-secondary,
  'disabled-text-on-surface': $dark-disabled,
  'navbar': variable('primary'),
  'primary-text-on-navbar': $white-primary,
  'accent-text-on-navbar': $white-primary,
  'accent': variable('primary'),
  'accent-dark': variable('primary-dark'),
);

$mode-dark: (
  'background': #121212,
  'background-light': #333,
  'primary-text-on-background': #fff,
  'surface': #1e1e1e,
  'primary-text-on-surface': $white-primary,
  'primary-text-on-surface-rgb': to_rgb($white-primary),
  'secondary-text-on-surface': $white-secondary,
  'disabled-text-on-surface': $white-disabled,
  'navbar': variable('surface'),
  'primary-text-on-navbar': $white-primary,
  'accent-text-on-navbar': variable('primary-light'),
  'accent': variable('primary-light'),
  'accent-dark': variable('primary'),
);

$modes: (
  'light': $mode-light,
  'dark': $mode-dark,
);

@each $name, $colors in $modes {
  [data-mode='#{$name}'] {
    @each $key, $color in $colors {
      --hbs-#{$key}: #{$color};
    }
  }
}

$bgLightMode: url('../images/icons/light.png');
$bgDarkMode: url('../images/icons/dark.png');
$mode-switcher-bg-image: $bgLightMode;
$mode-switcher-focus-bg-image: $bgLightMode;
$mode-switcher-checked-bg-image: $bgDarkMode;

#modeSwitcher {
  background-image: $mode-switcher-bg-image;
  height: 1.2rem;
  width: 2.5rem;
  margin-bottom: 0.25rem;

  &:focus {
    background-image: $mode-switcher-focus-bg-image;
  }

  &:checked {
    background-image: $mode-switcher-checked-bg-image;
  }
}
